<!-- 子账号 -->
<template>
	<view>
	<view class="main">
		<div v-for="(item, index) in items" :key="index"  >
		<view class="content-item">
			<p class="content-item-list">
				<span><image src="../../../static/人物.png" style="width: 15px; height: 15px;position: relative;top: 2px;border-radius: 5px;"></image></span>
				<span class="item-name">{{item.name}}</span>
				<span class="item-phone">{{item.phone}}</span>
				<span class="item-ed" @click="headEid(item,index)">编辑</span>
				<span class="item-text">|</span>
				<span class="item-del" @click="headDel(item,index)">删除</span>
			</p>
		</view>
		</div>
		<view class="end" >
			<button class="end-button" @click="showInputModal">新增账号</button>
		</view>
	</view>
	<BillModal ref="inputModal" @add-item="addItem" :userId="userId" :subaccountId="id" :name="name" :phone="phone" :type="type"/>
	<tips ref="tipsModal" @confirm="confirm" :userId="userId" :subaccountId="id" :name="name" :phone="phone" :type="type"/>
	</view>
</template>

<script>
	import {getSon,detelSon} from '@/api/bill.js';
	import BillModal from '@/pages/components/userModel/userModel.vue';	
	import tips from '@/pages/components/tips/tips.vue';	
	export default {
		components: {
			BillModal,
			tips
		 },
		data() {
			return {
				items:[
				],
				userId:0,
				name:'',
				phone:'',
				id:0,
				type:'',
			}
		},
		onLoad(options) {
				this.userId=options.userId;
		},
		mounted(){
			this.getList();
		},
		
		methods: {
			addItem(data){
				this.getList();
			},
			getList(){
				getSon({subaccountId:this.userId}).then(res =>{
					this.items=res.data.data
				});
			},
			confirm(data){
				if(data===true){
					detelSon({id:this.id}).then(res=>{
						uni.showToast({
						    title: '删除成功',
						    icon: 'success',
						});
						this.getList();
					}).catch(err => {
						// 处理删除失败的情况，可以显示一个错误提示框
						uni.showToast({
							title: '删除失败，请稍后再试',
							icon: 'none',
						});
					});
				}
				
			},
			headEid(item,index){
				this.name=item.name;
				this.phone=item.phone;
				this.id=item.id;
				this.type='修改';
				  this.$refs.inputModal.showModal('修改子账号', {
				    onConfirm: (value) => {
				      console.log('用户输入:', value);
				      // 在这里处理用户输入的内容
				    },
				    onCancel: () => {
				      console.log('用户取消了输入');
				    }
				  });
			},
			headDel(item,index){
				this.id=item.id;
				const title='是否删除 [ '+item.name+' ] 子账号'
				this.$refs.tipsModal.showModal(title, {
				  onConfirm: (value) => {
				    console.log('用户输入:', value);
				    // 在这里处理用户输入的内容
				  },
				  onCancel: () => {
				    console.log('用户取消了输入');
				  }
				});
			},
			showInputModal(item, index) {
				this.name=item.name;
				this.phone=item.phone;
				this.id=item.id;
				this.type='新增';
			      this.$refs.inputModal.showModal('新增子账号', {
			        onConfirm: (value) => {
			          console.log('用户输入:', value);
			          // 在这里处理用户输入的内容
			        },
			        onCancel: () => {
			          console.log('用户取消了输入');
			        }
			      });
			    },
		}
	}
</script>

<style>
@import "subaccount.css";
</style>
